{% extends 'base.html' %}
{% load static %}
{% block title %}智能运维系统{% endblock %}
{% block css %}
<link href="{% static 'ops.css' %}" rel="stylesheet" />
<style>
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        color: #333;
        background-color: #f0f0f0;
    }

    .container {

        background-color: #f9f9f9;
        max-width: 800px;
        margin: 60px auto;
        padding: 30px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    h1 {
        font-size: 26px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

    form {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    label {
        font-weight: bold;
        margin-bottom: 5px;
    }

    select {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    button {
        padding: 10px 20px;
        font-size: 16px;
        color: #fff;
        background-color: #0099ff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    button:hover {
        background-color: #007acc;
    }

    {#table {#}
    {#    width: 100%;#}
    {#    border-collapse: collapse;#}
    {#    margin-top: 20px;#}
    {#}#}

    th,
    td {
        border: 1px solid #ccc;
        padding: 12px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:hover {
        background-color: #e1e1e1;
    }

    a {
        display: block;
        margin-bottom: 10px;
        text-decoration: none;
        color: #0099ff;
    }

    p {
        font-size: 18px;
        color: #555;
        margin: 10px 0;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1>调整智能化力度</h1>
    <form method="post" action="/control/">
        {% csrf_token %}
        <label for="automation_level">选择智能化力度:</label>
        <select id="automation_level" name="automation_level">
            <option value="low">低</option>
            <option value="medium">中</option>
            <option value="high">高</option>
        </select>

        <h1>AI决策与算法选择</h1>
        {% csrf_token %}
        <label for="decision_making">选择AI决策方法:</label>
        <select id="decision_making" name="decision_making">
            <option value="ml_based">机器学习决策</option>
        </select>

        <label for="ml_algorithm">选择机器学习算法:</label>
        <select id="ml_algorithm" name="ml_algorithm">
            <option value="decision_tree">决策树</option>
            <option value="Bayes">朴素贝叶斯</option>
            <option value="SVM">支持向量机</option>
        </select>

        <button type="submit">提交</button>
    </form>
</div>
<div class="container">
    <h1>当前选择的智能化力度：</h1>
    <p>{{ a }}</p>

    <h1>当前选择的算法：</h1>
    <p>{{c }}</p>
    <p>{{ b }}</p>
</div>

{% if messages %}
    <script>
        {% for msg in messages %}
            alert('{{ msg.message }}');
        {% endfor %}
    </script>
{% endif %}
{% endblock %}
